<template>
  <div id="itemstat_container">
    <div class="dotime">
      <span>时间范围</span>
      <el-date-picker
        v-model="valuetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="mini"
      >
      </el-date-picker>

      <el-button class="searBtn" type="primary" size="mini">查询</el-button>
    </div>

    <div id="myChart" class="itemstat_container_main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      valuetime: "",
    };
  },

  methods: {},

  mounted() {
    let my = echarts.init(document.getElementById("myChart"));
    my.setOption({
      title: {
        text: "堆叠区域图",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["总订单", "总销售额", "今日订单数", "今日销售额"],
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "今日销售额",
          type: "line",
          stack: "总量",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "今日订单数",
          type: "line",
          stack: "总量",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "总销售额",
          type: "line",
          stack: "总量",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: "总订单",
          type: "line",
          stack: "总量",
          label: {
            show: true,
            position: "top",
          },
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    });
  },
};
</script>

<style lang="less" scoped>
#itemstat_container {
  height: 100%;
  background-color: #f0f2f5;

  display: flex;
  flex-direction: column;
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .dotime {
    margin: 10px 0;
    span {
      margin-right: 10px;
    }
    .searBtn {
      margin-left: 10px;
    }
  }
  .itemstat_container_main {
    height: 500px;
    background-color: #fff !important;
  }
}
</style>